<template>
  <div ref="outDom">
    <blog-title @goCate="goCate" :titleTag="titleArr"></blog-title>
    <blog-option
      :MessageLocation="messageLocation"
      @focusTextarea="focusTextarea"
      :blogName="blogDetailContent.title"
    ></blog-option>
    <transition name="fadeInDownBlog">
      <div class="header" v-if="competeContent" ref="test">
        <h1 style="text-shadow: 5px 5px 5px rgba(255, 255, 255, 0.8)">
          {{ blogDetailContent.title }}
        </h1>

        <!-- <h1>{{blogDetailContent.title}}</h1> -->
        <p style="font-family: veria Sans Libre, Fantasy">
          <span>ttzxh</span><span>｜</span>
          <span>{{ parseInt(blogDetailContent.time) | format }}</span>
          <span>
            <i class="iconfont iconyanjing" style="color: #5183e6"></i>
            <span style="color: #5183e6; margin: 0px">{{
              blogDetailContent.seeNum
            }}</span>
          </span>
          <span>
            <i class="iconfont icondianzan"></i>
            {{ blogDetailContent.goodNum }}
          </span>
        </p>
      </div>
    </transition>
    <transition name="fadeInUpBlog">
      <div v-if="competeContent">
        <div
          class="content"
          style="font-weight: 300"
          v-html="blogDetailContent.content"
        >
        </div>
        <footer ref="Footer">
          <!-- <remark></remark> -->
        </footer>
      </div>
    </transition>
  </div>
</template>

<script>
import Remark from "../remark/remark";
import blogTitle from "../../components/catalogue.vue";
import { formatTime } from "../../formatTime";
import blogOption from "../../components/blogOption.vue";
export default {
  components: {
    Remark,
    blogOption,
    blogTitle,
  },
  data() {
    return {
      blogDetailContent: {},
      competeContent: false,
      messageLocation: 0,
      titleArr: [],
    };
  },
  created() {
    this.$nextTick(() => {
      document.querySelector(".PCindex").scrollTop = 0;
    });
    this.getBlogDetailContent();
  },
  filters: {
    format(val) {
      return formatTime(parseInt(val));
    },
  },
  methods: {
    goCate(offsetTop){
      document.querySelector(".PCindex").scrollTop = offsetTop+139;

    },
    detailCode() {
      let blockCode = document.querySelectorAll("pre code");
      console.log(blockCode);
      blockCode.forEach((item) => {
        item.innerHTML = `<ul><li>${item.innerHTML.replace(
          /\n/g,
          "\n</li><li>"
        )}</li></ul>`;
      });
    },
    handleTitle() {
      let content = document.querySelector(".content");
      let node = [];
      content.children.forEach((item) => {
        if (["H1", "H2", "H3", "H4", "H5", "H6"].includes(item.nodeName)) {
          node.push({
            tag: item.nodeName,
            content: item.innerText,
            width: parseInt(item.nodeName.charAt(1) * 1) + 3,
            offsetTop:item.offsetTop
          });
        }
      });
      this.titleArr = node;
    },
    focusTextarea() {
      document.querySelector("#remarkTextarea").focus();
    },
    getOffsetTopToBody(dom) {
      let bodyDom = dom;
      let localTop = dom.offsetTop;
      if (bodyDom.offsetTop === 50) {
        localTop = dom.offsetTop;
      } else {
        while (bodyDom.offsetTop !== 50) {
          bodyDom = bodyDom.parentElement;
          localTop += bodyDom.offsetTop;
        }
      }
      return {
        bodyDom,
        localTop,
      };
    },
    getBlogDetailContent() {
      this.$axios
        .get("/blog/list", {
          params: {
            id: this.$route.params.id,
            status: this.$store.getters.user.status,
          },
        })
        .then((res) => {
          if (res.data.error === -1) {
            let that = this;
            this.competeContent = true;
            setTimeout(() => {
              let footerDom = that.$refs.Footer;
              that.messageLocation =
                that.getOffsetTopToBody(footerDom).localTop;
            });
            this.blogDetailContent = res.data.data[0];
            this.$nextTick(() => {
              this.detailCode();
              this.handleTitle();
            });
          }
        });
    },
  },
};
</script>

<style lang="less">
.hljs {
  margin: 8px 0;
  padding: 8px 8px;
  overflow-x: auto;
  font-size: 14px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  &::before {
    content: "";
    width: 100%;
    height: 40px;
    background-color: red;
  }
}
.hljs {
  opacity: 0.8;
  border: 0;
  font-family: "Consulas", "Courier New", Courier, mono, serif;
  font-size: 12px;
  background: #eee !important;
  display: block;
  width: 100%;
  font-weight: 400;
  color: #333;
  white-space: pre-wrap;
}
.hljs ul {
  list-style-type: style;
  background-color: #fff;
  margin: 0px 0px 0 40px !important;
  padding: 0px;
}
.hljs ul li {
  list-style-type: style !important;
  border-left: 1px solid #ddd !important;
  background: #fff;
  padding: 5px !important;
  margin: 0 !important;
  line-height: 14px;
  word-break: break-all;
  word-wrap: break-word;
  color: #333;
}
.hljs ul li:nth-of-type(even) {
  // background-color: #fcfcfc;
  // color: #333;
}
</style>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
.header {
  text-align: center;
  overflow: hidden;
  h1 {
    margin-top: 35px;
  }
  p {
    color: #777777;
    // margin-top: 10px;
    span {
      margin: 0 15px;
      i {
        margin: 0 5px;
      }
    }
  }
}
.content {
  padding: 55px;
  font-size: 17px;
  color: #333;
  /deep/ p {
    text-indent: 2em;
    margin-bottom: 16px;
  }
  /deep/ li {
    white-space: pre-wrap;
  }
  /deep/ h3 {
    margin: 16px 0;
  }
  /deep/ h2 {
    margin: 16px 0;
  }
  /deep/ h4 {
    margin: 16px 0;
  }
  /deep/ ol li {
    list-style: decimal;
    margin: 8px 0;
  }
  /deep/ blockquote{
	background-color: rgba(255, 255, 255, .5);
	padding: 8px !important;
}
  /deep/ pre code ul li {
    list-style: style;
    text-indent: 2em;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 3px 8px;
  }
  /deep/ ul li {
    list-style: disc;
    padding: 2px 0;
  }
  /deep/ ul li ul li {
    list-style: circle;
    line-height: 0;
  }
  div {
    font-size: 16px;
  }
}
@media screen and(max-width: 765px) {
  .header {
    color: #f5f5f5;
    p {
      color: #f5f5f5;
    }
  }

  .content {
    color: blanchedalmond;
    padding: 35px;
    font-size: 17px;
  }
}
</style>